
<!--解决方案-->

<template>
  <div class="pc-resolve">
    <div>
      <img
        :src="require('../../assets/imgs/resolve-nav/banner-111.png')"
        @click="goLogin"
        @load="loadImg('resolve-img', 1366, 345)"
        class="resolve-img"
      >
    </div>
    <div class="pc-resolve-container">
      <div class="pc-resolve-title">解决方案</div>
      <div class="pc-resolve-content">
        <div :key="item.id" class="container-out" v-for="item in cases">
          <div class="container">
            <div>
              <div class="resolve-item-up">
                <div class="item-up-icon">
                  <img :src="item.src">
                </div>
                <div class="item-up-name">
                  <div>{{item.name}}</div>
                  <div>{{item.describe}}</div>
                </div>
              </div>
              <div class="resolve-item-down">
                <span @click="gotoDetail(item.id)">
                  了解详情
                  <i class="el-icon-right"></i>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <login :dialogVisible="dialogVisible" :isSignIn="isSignIn" @close="closeDialog"></login>
    <div @click="close" class="login-mask" tabindex="0" v-if="showmask"></div>
  </div>
</template>

<script>
import { loadImg, isMobile } from '../../utils/util';
import login from './login';
export default {
    name: 'resolve',
    components: {
        login,
    },
    data() {
        return {
            showmask: false,
            dialogVisible: false,
            isSignIn: '',
            cases: [
                {
                    id: 0,
                    icon: 'el-icon-document-copy',
                    name: '产品说明会',
                    name1: 'prodes1',
                    src1: require('../../assets/imgs/resolve-nav/pro-des.png'),
                    src: require('../../assets/imgs/resolve-nav/pro-des-2.png'),
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
                {
                    id: 1,
                    icon: 'el-icon-trophy',
                    src: require('../../assets/imgs/resolve-nav/start-des.png'),
                    src1: require('../../assets/imgs/resolve-nav/start-des-2.png'),
                    name: '创业说明会',
                    name1: 'startdes1',
                    describe: '主要是吸收具有创业精神的员工加入营销队伍',
                },
                {
                    id: 2,
                    icon: 'el-icon-timer',
                    src: require('../../assets/imgs/resolve-nav/bus-des.png'),
                    src1: require('../../assets/imgs/resolve-nav/bus-des-2.png'),
                    name: '业务启动会',
                    name1: 'busdes1',
                    describe: '产品说明会属于激励类会议，是领导统一思想',
                },
                {
                    id: 3,
                    icon: 'el-icon-watch-1',
                    src: require('../../assets/imgs/resolve-nav/cite.png'),
                    src1: require('../../assets/imgs/resolve-nav/cite-2.png'),
                    name: '表彰会',
                    name1: 'cite1',
                    describe: '表彰会属于激励类会议，是企业对于员工的一种肯定',
                },
                {
                    id: 4,
                    icon: 'el-icon-cold-drink',
                    name: '企业年会',
                    name1: 'metting1',
                    src: require('../../assets/imgs/resolve-nav/metting.png'),
                    src1: require('../../assets/imgs/resolve-nav/mettiing-2.png'),
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
                {
                    id: 5,
                    icon: 'el-icon-refrigerator',
                    src: require('../../assets/imgs/resolve-nav/ack.png'),
                    src1: require('../../assets/imgs/resolve-nav/ack-2.png'),
                    name: '客户答谢会',
                    name1: 'ack1',
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
                {
                    id: 6,
                    icon: 'el-icon-copy-document',
                    name: '婚庆',
                    name1: 'wedding1',
                    src: require('../../assets/imgs/resolve-nav/wedding.png'),
                    src1: require('../../assets/imgs/resolve-nav/wedding-2.png'),
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
                {
                    id: 7,
                    icon: 'el-icon-postcard',
                    name: '沙龙私享会',
                    name1: 'salon1',
                    src: require('../../assets/imgs/resolve-nav/salon.png'),
                    src1: require('../../assets/imgs/resolve-nav/salon-2.png'),
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
                {
                    id: 8,
                    icon: 'el-icon-cpu',
                    name: '新品发布会',
                    name1: 'np1',
                    src: require('../../assets/imgs/resolve-nav/np.png'),
                    src1: require('../../assets/imgs/resolve-nav/np-2.png'),
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
                {
                    id: 9,
                    icon: 'el-icon-present',
                    name: '演讲活动',
                    name1: 'talk1',
                    src: require('../../assets/imgs/resolve-nav/talk.png'),
                    src1: require('../../assets/imgs/resolve-nav/talk-2.png'),
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
                {
                    id: 10,
                    icon: 'el-icon-present',
                    name: '联谊活动',
                    name1: 'ship1',
                    src: require('../../assets/imgs/resolve-nav/ship.png'),
                    src1: require('../../assets/imgs/resolve-nav/ship-2.png'),
                    describe:
                        '产品说明会属于营销类会议，主要是把客户集中起来进行讲解',
                },
            ],
        };
    },
    mounted() {
        this.loadImg = loadImg;
        this.loadImg('resolve-img', 1366, 345);
        window.addEventListener(
            'resize',
            () => {
                this.loadImg('resolve-img', 1366, 345);
            },
            false
        );
        // 鼠标经过变色
        let nodes = document.getElementsByClassName('pc-resolve-content')[0];
        for (let i = 0; i < nodes.children.length; i++) {
            nodes.children[i].onmouseenter = () => {
                let imgs = document.getElementsByClassName('item-up-icon')[i]
                    .children[0];
                imgs.src = this.cases[i].src1;
            };
            nodes.children[i].onmouseleave = () => {
                let imgs = document.getElementsByClassName('item-up-icon')[i]
                    .children[0];
                imgs.src = this.cases[i].src;
            };
        }
    },
    methods: {
        gotoDetail(id) {
            this.$router.push({
                path: '/resolveDetail',
                query: { name: this.cases[id].name1 },
            });
        },
        loadImg() {},
        goLogin(a) {
            this.dialogVisible = !0;
            this.$emit('showLogin', true);
            this.isSignIn = a === 'signIn';
            this.showmask = true;
        },
        closeDialog(a) {
            this.dialogVisible = !1;
            this.$emit('showLogin', false);
            this.showmask = false;
        },
        close() {
            this.showmask = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.pc-resolve {
    background-color: rgb(242, 242, 242);
    .resolve-img {
        cursor: pointer;
    }
    .pc-resolve-container {
        width: 1200px;
        margin: 0 auto;
        .pc-resolve-title {
            font-weight: bold;
            text-align: center;
            margin: 30px;
        }
        .pc-resolve-content {
            display: flex;
            flex-wrap: wrap;
            .container-out {
                width: 25%;
                box-sizing: border-box;
                margin-bottom: 20px;
                .container {
                    border: 2px solid transparent;
                    & > div {
                        border: 1px solid #ccc;
                        background: #fff;
                        .resolve-item-up {
                            display: flex;
                            height: 148px;
                            .item-up-icon {
                                width: 33.3%;
                                box-sizing: border-box;
                                border-right: 1px solid #ccc;
                                border-bottom: 1px solid #ccc;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                            }
                            .item-up-name {
                                width: 66.6%;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: -webkit-box;
                                -webkit-line-clamp: 3; /* 可以显示的行数，超出部分用...表示*/
                                -webkit-box-orient: vertical;
                                padding: 25px 20px;
                                box-sizing: border-box;
                                border-bottom: 1px solid #ccc;
                                & > div:nth-child(1) {
                                    font-size: 20px;
                                    margin-bottom: 10px;
                                }
                                & > div:nth-child(2) {
                                    font-size: 14px;
                                    color: #d5d5d5;
                                }
                            }
                        }
                        .resolve-item-down {
                            background: #fbfbfb;
                            padding: 13px 0;
                            text-align: center;
                            span {
                                cursor: pointer;
                            }
                        }
                    }
                    &:hover {
                        border: 2px solid #1994fa;
                        & > div {
                            border: 1px solid #1994fa;
                            span {
                                color: #1994fa;
                            }
                        }
                    }
                }

                &:nth-child(4n + 1) {
                    padding-right: 10px;
                }
                &:nth-child(4n + 2),
                &:nth-child(4n + 3) {
                    padding: 0 10px;
                }
                &:nth-child(4n) {
                    padding-left: 10px;
                }
            }
        }
    }
}
@media screen and (max-width: 1200px) {
    .pc-resolve {
        .pc-resolve-container {
            width: 100%;
        }
    }
}
@media screen and (max-width: 768px) {
    .pc-resolve {
        .pc-resolve-container {
            .pc-resolve-title {
                margin: 15px;
            }
            .pc-resolve-content {
                .container-out {
                    width: 50%;
                    &:nth-child(even) {
                        padding: 0 6px 0 3px;
                    }
                    &:nth-child(odd) {
                        padding: 0 3px 0 6px;
                    }
                    .container {
                        & > div {
                            .resolve-item-up {
                                .item-up-name {
                                    -webkit-line-clamp: 100; /* 可以显示的行数，超出部分用...表示*/
                                    & > div:nth-child(1) {
                                        font-size: 14px;
                                    }
                                    & > div:nth-child(2) {
                                        font-size: 12px;
                                    }
                                }
                            }
                            .resolve-item-down {
                                padding: 8px 0;
                                span {
                                    font-size: 14px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>